<template>
  <div class="header">
    <div class="container">
      <div class="logo">
        <img src="" alt="" />
        <span>DPP的个人站点</span>
      </div>

      <div class="header_right islogin" v-if="isLogin">
        <span @click="goCms"><el-icon>
            <OfficeBuilding />
          </el-icon> 进入后台</span>
        <span><el-avatar :src="avatar" fit="fill" /></span>
        <el-dropdown @command="clickAbout">
          <span class="el-dropdown-link">
            {{ 'dpp ' }}

            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item icon="Close" command="exit">退出登录</el-dropdown-item>
              <el-dropdown-item icon="InfoFilled" divided command="info">个人信息</el-dropdown-item>
              <el-dropdown-item icon="Unlock" command="psw">修改密码</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="header_right" v-else>
        <span @click="login">登录</span>
        <span @click="regist">注册</span>
      </div>
    </div>

  </div>
  <Login :drawer="drawer" @close="drawer = false" />
  <Regist :drawer="drawerRegist" @close="drawerRegist = false" />
</template>

<script setup lang="ts">
import { base } from '~/service/config';

const drawer = ref(false);
const drawerRegist = ref(false);
const isLogin = ref(false);
const avatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png');
const user = ref()

const goCms = () => {
  if (import.meta.env) {
    window.open('http://127.0.0.1:5173/')
  } else {
    window.open('http://106.14.121.85:3002/')
  }
}
const clickAbout = (command: string) => {
  switch (command) {
    case 'exit': loginout()
      break;

    case 'info':
      break;

    case 'psw':
      break;

    default:
      break;
  }
};

const loginout = () => {
  localStorage.removeItem('web-user')
  location.reload()
}

const login = () => {
  drawer.value = true;
};
const regist = () => {
  drawerRegist.value = true;
};

onMounted(() => {
  isLogin.value = Boolean(localStorage.getItem('web-user'))
  user.value = JSON.parse(localStorage.getItem('web-user') as string) || {}
  avatar.value = base + user.value.iamge || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

</script>

<style scoped lang="scss">
.header {
  height: 60px;
  line-height: 60px;
  background-color: rgb(84, 92, 100);
  color: white;
  position: fixed;
  width: 100%;
  top: 0;

  .container {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .header_right {
      span {
        padding: 0 20px;
        cursor: pointer;

        &:hover {
          color: gold;
        }
      }
    }
  }



  .logo {}

  .islogin {
    display: flex;
    align-items: center;

    span:first-child {
      display: flex;
      align-items: center;
    }

    .el-dropdown {
      color: white;
    }
  }
}
</style>
